<template>
    <!-- 广告图-->
    <div class="prom_wrapper">
        <!-- <div class="prom_floortop">
            <a href="" class="prom_floortop_item">
                <img class="prom_floortop_good" src="https://yanxuan-item.nosdn.127.net/b6c1b1d3c7a6a1a40d92991d8cf01f0b.png?imageView&thumbnail=168x0&quality=75" alt="">
            </a>
        </div> -->
        <div class="advertising">
            <div class="bigimg">
                <img class="img" src="../../assets/images/bigimg.png" />
            </div>
        </div>

        <div class="prom_floorbottom">
            <a class="prom_floorbottom_item1" href="javascript:;">
                <img 
                class="prom_good" 
                src="https://yanxuan-item.nosdn.127.net/4db9cee4998ec82a7305f45f41953802.png?quality=75&type=webp&imageView&thumbnail=160x160" 
                
                alt="" >
            </a>
            <a class="prom_floorbottom_item2" href="javascript:;">
                <img 
                class="prom_good" 
                src="https://yanxuan-item.nosdn.127.net/b6c1b1d3c7a6a1a40d92991d8cf01f0b.png?quality=75&type=webp&imageView&thumbnail=160x160" 
                
                alt="" >
            </a>
            <a class="prom_floorbottom_item3" href="javascript:;">
                <img 
                class="prom_good" 
                src="https://yanxuan-item.nosdn.127.net/85918b3f3b7dc4525c0a160d6f7fa650.png?quality=75&type=webp&imageView&thumbnail=160x160" 
                
                alt="" >
            </a>
        </div>
    </div>
</template>

<script setup lang='ts'>

</script>
 
<style lang="less">

.bigimg {
    width: 100%;
    height: 96px;

    .img {
        height: 100px;
        width: 100%;
    }
}

.advertising {
    height: 125px;

}
.prom_wrapper {
    display: flex;
    flex-direction: column;
    height: 216px;
    width: 100%;
    .prom_floortop{
        display: flex;
        a.prom_floortop_item{
            height: 109px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: relative;
            .prom_floortop_good{
                position: absolute;
                width: 84px;
                // height: 84px;
                left: 35px;
            }

        }
    }
    .prom_floorbottom{
        display: flex;
        justify-content: space-evenly;

        .prom_floorbottom_item1{
            margin-top: 10px;
            width: 115.5px;
            height: 110px;
            background-image: url(https://yanxuan.nosdn.127.net/static-union/16807669581d866f.png?quality=75&type=webp&imageView&thumbnail=250x0);
            background-size: 100% auto;
            background-repeat: no-repeat;
            display: flex;
            position: relative;
            .prom_good{
                position: absolute;
                top: 50%;
                left: 50%;
                width:70px;
                height:70px;
                margin-left: -35px;
                margin-top: -15px;
    
            }
        }
        .prom_floorbottom_item2{
            margin-top: 10px;
            width: 115.5px;
            height: 110px;
            background-image: url("https://yanxuan.nosdn.127.net/static-union/1680767018ab6319.png?quality=75&type=webp&imageView&thumbnail=250x0");
            background-size: 100% auto;
            background-repeat: no-repeat;
            display: flex;
            position: relative;
            .prom_good{
                position: absolute;
                top: 50%;
                left: 50%;
                width:70px;
                height:70px;
                margin-left: -35px;
                margin-top: -15px;
    
            }
        }
        .prom_floorbottom_item3{
            margin-top: 10px;
            width: 115.5px;
            height: 110px;
            background-image: url("https://yanxuan.nosdn.127.net/static-union/1680767130f6e816.png?quality=75&type=webp&imageView&thumbnail=250x0");
            background-size: 100% auto;
            background-repeat: no-repeat;
            display: flex;
            position: relative;
            .prom_good{
                position: absolute;
                top: 50%;
                left: 50%;
                width:70px;
                height:70px;
                margin-left: -35px;
                margin-top: -15px;
    
            }
        }


    }
}
</style>
